<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <!-- 1.重置样式 -->
{{--    <link rel="stylesheet" href="../../asset/css/normalize.css">--}}
    <!-- 2.公共样式 -->
{{--    <link rel="stylesheet" href="../../asset/css/common.css">--}}
    <!-- 3.当前样式 -->
{{--    <link rel="stylesheet" href="./register.css">--}}
</head>
<body>
<form action="#" class="" method="post">
    <div class="register">注册页面</div>
    <div class="yourUserName  clearfix"><p class="fl">用户名:</p><input type="text" class="fr" id="username" placeholder="请输入您要注册的用户名"></div>
    <div  class="yourPassWord  clearfix"><p class="fl">密码:</p><input type="text" class="fr" id="password" placeholder="请输入您要注册的密码"></div>
{{--    <div  class="email  clearfix"><p class="fl">邮箱地址:</p><input type="text" class="fr" id="email" placeholder="请输入您的邮箱"></div>--}}
    <div class="button clearfix"><button type="submit" class="fr" id="button">点击注册</button></div>
    <div class="register fr"><a href="/admin/auth/login">点击跳转到登录页面</a> </div>
</form>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</body>

</html>
<style>
    html{
        width: 100%;
        height: 100%;
        position: fixed;
        /*background-image: url(/img/one27.jpeg);*/
    }
    body {
        width: 100%;
        height: 100%;
        background-image: url(/img/one27.jpeg);
        background-repeat: no-repeat;
        background-size: 100% 100% ;
        background-attachment:fixed;
    }

    /* ================================================================================== */
    /* 登录样式 */
    form {
        width: 600px;
        height: 500px;
        text-align: center;
        position: relative;
        margin: 0 auto;
        background-color: rgba(0, 0, 0, .5);
        margin-top: 6%;
        border-radius: 20px;
        padding-top: 20px;
    }
    .register {
        width: 200px;
        height: 50px;
        margin: 0% auto;
        line-height: 50px;
        font-size: 36px;
        color: whitesmoke;
    }
    .yourPassWord,
    .yourUserName,
    .email,
    .button{
        width: 450px;
        margin: 0 auto;
        margin-top: 30px;
        box-sizing: border-box;
    }

    .yourPassWord,
    .yourUserName,
    .email {
        color: whitesmoke;
        font-size: 28px;
        line-height: 50px;
    }

    #userName,
    #passWord,
    #email{
        height: 50px;
        width: 320px;
        font-size: 24px;
        outline: none;
        padding-left: 20px;
        background: none;
        border-radius: 15px;
        border: 2px solid gray;
    }

    button {
        width: 320px;
        height: 50px;
        background: none;
        outline: none;
        border: 2px solid gray;
        border-radius: 15px;
        font-size: 24px;
        transition: all 1s;
        color: whitesmoke;
    }

    button:hover {
        background: rgb(175, 170, 175);
        color: whitesmoke;
    }

    .register {
        width: 300px;
        margin-top: 20px;

    }

    .register a {
        color: whitesmoke;
        font-size: 18px;
    }
    input{
        color:whitesmoke;
    }


    /* 公共样式表 */


    /* 左浮动 */
    .fl{
        float: left;
    }
    /* 右浮动 */
    .fr{
        float: right;
    }
    /* 清除浮动 */
    .clearfix::after{
        content: '';
        height: 0px;
        display: block;
        clear: both;
    }

    /* 测试 */
    .test{
        border: 1px solid red;
    }

    /* 重置container内边距 */
    .container , .container-fuild{
        padding: 0%;
    }

    body{
        background-color: #f2f2f2;
    }
    h1,h2,h3,h4,h5,h6{
        padding: 0%;
        margin: 0%;
    }

    /* ================================================================================== */


    /* 公共模块表 */

    /* 头部模块 */

    /* 尾部模块 */

    /* 重置样式表 */

    /* 重置内外边距 */
    *{
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
    }

    /* 去除图片底部4px白边 */
    img{
        vertical-align: middle;
    }

    /* 去除li的点 */
    ul{
        list-style: none;
    }

    /* 重置a标签的默认样式 */
    a{
        text-decoration: none;
        color: black;
    }



</style>
